<template>
    <div class="container" >
        <ul class="channel-list" style="background: #fff;padding-top:20px;">
            <li>
                <div class="template-list-right" style="padding:0">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">报备项目</div>
                            <div class="contrls">{{cusPre.premisesName}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">客户姓名</div>
                            <div class="contrls">{{cusPre.name}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>

            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">客户号码</div>
                            <div class="contrls">{{cusPre.mobile}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>

            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">中介机构门店</div>
                            <div class="contrls">{{cusPre.staffCompanyName}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">中介经纪人</div>
                            <div class="contrls">{{cusPre.staffName}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>

            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">经纪人电话</div>
                            <div class="contrls">{{cusPre.staffPhone}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
            <li>
                <div class="template-list-right">
                    <div class="title">
                        <div class="template-list-left">
                            <div class="label-title">预计到访时间</div>
                            <div class="contrls">{{cusPre.hopeVisitTime}}</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </li>
        </ul>
        <div class="footer">
	    	<div class="footer-content">
                <button class="operationBtn btnOne" @click="backDetail">返回</button>
                <button class="operationBtn btnTwo" @click="copyModal">复制报备信息</button>
    		</div>
	    </div>
        
    </div>
</template>

<script>
    import VueClipboard from 'vue-clipboard2';
    export default {
        components:{
            VueClipboard
        },
        data(){
            return{
                copyContent:'',
                cusPre:{
                    id: '',
                    premisesName:'',
                    name:'',
                    mobile:'',
                    staffCompanyName:'',
                    hopeVisitTime:''
                }
            }
        },
        mounted:function(){

            this.cusPre =  this.$route.params.cusPre;
            this.initText();
        },
        methods:{
            initText(){
                this.copyContent =
                    "报备项目：" + this.cusPre.premisesName +"\r\n" +
                    "客户姓名：" + this.cusPre.name + "\r\n" +
                    "客户号码：" + this.cusPre.mobile + "\r\n" +
                    "中介机构门店：" + this.cusPre.staffCompanyName + "\r\n" +
                    "中介经纪人：" + this.cusPre.staffName + "\r\n" +
                    "经纪人电话：" + this.cusPre.staffPhone + "\r\n" +
                    "预计到访时间：" + this.cusPre.hopeVisitTime + "\r\n"
            },
            copyModal(){
                this.$copyText(this.copyContent).then(function (e) {
                    layer.msg('复制成功')
                    console.log(e)
                }, function (e) {
                    layer.msg("复制失败，请手动复制")
                    console.log(e)
                })
            },
            backDetail(){
                var _self = this;
				_self.$router.replace({
					path: '/customerDetails/'+_self.cusPre.id
				})
            }
        }
    }
</script>

<style scoped>
    .contrls{text-align: right;float:right}
    .channel-list li{height: 35px;line-height: 35px;padding:0 15px;}
    .template-list-right{padding:0}
    .title{border-bottom: 1px solid #ccc;}
    .label-title{float:left;}
    .btn-block{width: 90%;height: 40px;display: block;margin:36px auto;background-color: #ff7900;color: #fff;font-size: 14px;line-height: 40px;border-radius: 4px;}


    /*底部按钮*/
	.footer{position: fixed;left: 0;right: 0;bottom: 0;z-index: 2;}
	.footer-content .operationBtn{float: left;width: 50%;height: 40px;line-height: 40px;text-align: center;}
	.footer-content .btnOne{background-color: #fff;border-top: 1px solid #cdcdcd;color: #333;}
	.footer-content .btnTwo{background-color: #eb6100;color: #fff;}

	.footer-content:after,.personal-info:after,.other-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}

</style>